<template>
  <div class="AnalysisAndKeynode">
    <div class="tibs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="企业电量分析" name="analysis"></el-tab-pane>
        <el-tab-pane label="重点设备电量" name="keynote"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="bodybox">
      <component :is="component"></component>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CallPoliceIndex',
  data() {
    return {
      activeName: 'analysis',
      component: ''
    }
  },

  mounted() {
    this.handleClick()
  },

  methods: {
    handleClick(val) {
        this.component = () => import(`@/views/statistics/${this.activeName}`)
    }
  }
}
</script>
<style lang="scss" scoped>
.AnalysisAndKeynode {
  padding: 10px;
  height: 100%;
  .tibs {
    margin-bottom: 10px;
    background-color: #fff;
    padding: 0 20px 0 20px;
    height: 40px;
    ::v-deep .el-tabs__nav-wrap::after {
      height: 0px;
    }
  }
  .bodybox {
    height: calc(100% - 50px);
    background-color: #fff;
    padding: 20px;
    overflow-y: auto;
  }
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0px;
}
</style>
